<template>
  <div>
    <div>
      <div class="simpleline">
        <h6>接口地址：</h6>
        <p>https://api.uomg.com/api/get.qqdj</p>
      </div>
      <div class="simpleline">
        <h6>返回格式：</h6>
        <p>json/text</p>
      </div>
      <div class="simpleline">
        <h6>请求方式：</h6>
        <p>get/post</p>
      </div>
      <div class="simpleline">
        <h6>请求示例：</h6>
        <p>https://api.uomg.com/api/get.qqdj?qq=774740085&skey=@surhcc2</p>
      </div>
    </div>
    <div class="simpleTable">
      <i
        class="el-icon-collection"
        style="margin-right: 10px;"
      />
      <h5>请求参数说明：</h5>
      <el-table
        :data="requestData"
        style="width: 100%"
        class="api-table"
        stripe
      >
        <el-table-column
          prop="parameter"
          label="名称"
          width="100"
        />
        <el-table-column
          prop="must"
          label="必填"
          width="60"
        />
        <el-table-column
          prop="types"
          label="类型"
          width="80"
        />
        <el-table-column
          prop="illustrate"
          label="说明"
        />
      </el-table>
    </div>
    <div class="simpleTable">
      <i
        class="el-icon-collection"
        style="margin-right: 10px;"
      />
      <h5>名称参数说明：</h5>
      <el-table
        :data="nameData"
        class="api-table"
        stripe
      >
        <el-table-column
          prop="systemErrorCode"
          label="名称"
          width="100"
        />
        <el-table-column
          prop="systemTypes"
          label="类型"
          width="80"
        />
        <el-table-column
          prop="systemIllustrate"
          label="说明"
        />
      </el-table>
    </div>
    <div class="simpleTable">
      <i
        class="el-icon-collection"
        style="margin-right: 10px;"
      />
      <h5>返回示例：</h5>
      <p style="padding: 16px; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; font-size: 12px; color: #333;">
        {{ jsonData }}
      </p>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DocApi',
  data () {
    return {
      activeName: 'second',
      requestData: [],
      nameData: [],
      jsonData: [],
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData () {
      this.$axios.get('/text/list', {
      }).then(({ data: res}) => {
        console.log(res.requestData)
        console.log(res.nameData);
        if (res.code === 200) {
          this.requestData = res.requestData
          this.nameData = res.nameData
          this.jsonData = res.jsonData
        }else {
          this.$message.error('错了哦，这是一条错误消息');
        }
      })
    },
  }
}
</script>

<style>
/* 主体部分 */
.main-container {
  padding: 0 200px;
  min-height: 500px;
  line-height: 20px;
  margin-block: 3rem;
}
.simpleline {
  padding-bottom: 16px;
  color: #555;
}
.simpleline p,h5,h6 {
  display: inline;
}
.simpleline p {
  font-size: 12px;
  color: #777;
}
.api-table {
  width: 100%;
  font-size: 12px;
  border: 1px solid #e7e7e7;
  text-align: left;
  color: #777;
  margin-top: 1rem;
}
.el-table .el-table__cell {
  padding: 6px 0;
}
.simpleTable {
  margin-bottom: 50px;
}
</style>
